import React, {Component, Suspense} from 'react'
import MyLayout from 'components/MyLayout'
import { Switch, Route, Redirect } from 'react-router-dom'
import adminRoutes from '../../routes/adminRoutes.js'
import NotFound from 'pages/NotFound'
import { Spin } from 'antd'
class Admin extends Component{
  render(){
    return (
      <div>
        <MyLayout>
        <Suspense fallback={ <Spin size="large"/> }>
          <Switch>
            {
              adminRoutes.map(route=>{
                return (
                  <Route 
                    key={route.path}
                    path={route.path}
                    render = {
                      (routeProps)=>{
                         /*
                         判断用户角色 是否可以访问当前路由
                         */ 
                        if(route.meta.roles === '*'){
                          return <route.component {...routeProps}/>
                        }
                        const role = localStorage.getItem('role');
                        const roles = route.meta.roles;
                        // includes
                        const hasPermission = roles.includes(role);
                        if(hasPermission){
                           // 可以访问
                           return <route.component {...routeProps}/>
                        }else{
                          // 没有权限
                          return <Redirect to="/admin/noPermission"/>
                        }
                      }
                    }
                  />
                )
              })
            }
            <Route path="/admin/404" component={NotFound}/>
            <Redirect to="/admin/dashBoard" from="/admin" exact/>
            <Redirect to="/admin/404"/>
          </Switch>
         </Suspense>
        </MyLayout>
      </div>
    )
  }
}

export default Admin